import { Button, notification,Spin,Alert,Typography   } from "antd"
import { ReadOutlined,SmileOutlined } from "@ant-design/icons"
import { KNOWLEDGE_LIB_ROUTER } from "~src/constants"

export namespace GetUrl {
    export enum Action {
        GetUrl = 'GetUrl',
        GetUrlStart = 'GetUrlStart',
        GetUrlResolve = 'GetUrlResolve',
        GetUrlReject = 'GetUrlReject'
    }

    export type Message = {
        id: string
        action: Action
        data?: any
    }
}

/**
 * 收藏文章
 */
export namespace GetUrl {
    export const id = 'GET_URL'
    const key = 'updatable';
    const { Title,Text } = Typography;
    /**
     * 消费消息
     * @param message 
     * @returns 
     */
    export const consume = (message: Message) => {
        console.log('GetUrl.consume called with message:', message);
        if (message.action === 'GetUrl') {
            // Get page content from body
            const content = document.body.innerText;
            return {
                url: window.location.href,
                title: window.document.title,
                content: content
            }
        }

        if (message.action === 'GetUrlStart') {
            notification.success({        
                key,        
                // message: 'Saving',                
                message: 'InfoKeyMind',                
                // description: 'Saving in progress...',
                icon: <SmileOutlined style={{ color: '#108ee9' }} />,
                description: (
                    <>
                        <Spin spinning={true} size="large" >
                            <div>
                                {/* <h1><font color="blue">Saving in progress...</font></h1>
                                <h3><font color="blue">Please wait a moment.</font></h3>	 */}

                                       {/* <Alert
                                            message="Please wait..."
                                            description="Saving in progress..."
                                            type="success"   
                                            style={{ width: '300px' }} // 设置宽度为300px                                         
                                        /> */}
                                         {/* <Title>Please wait...</Title> */}
                                         {/* <Title level={2} type="success">Saving in progress...</Title> */}
                                         {/* in progress... */}
                                         <Title level={3} type="secondary" style={{ color: 'blue' }}>Saving in progress...</Title>  
                                         {/* <Text type="success">Saving in progress...</Text> */}
                            </div>
                        </Spin>
                    </>
                ),
                duration:null,
                // showProgress: true,
                btn: (
                    <Button
                        type="primary"
                        icon={<ReadOutlined />}
                        onClick={() => {
                            window.open(KNOWLEDGE_LIB_ROUTER)
                        }}
                    >                        
                        Open the knowledge base
                    </Button>
                ),
                onClick: () => {
                    console.log('Notification Clicked!');
                },                
            });

            return {
                message: 'success'
            }
        }

        if (message.action === 'GetUrlResolve') {            
            notification.success({        
                key,        
                // message: 'Saved',         
                message: 'InfoKeyMind', 
                icon: <SmileOutlined style={{ color: '#108ee9' }} />,       
                // description: 'Saved to InfoKeyMind!',
                description: (
                    <>
                        <div>
                        {/* <h1><font color="green">Saved to InfoKeyMind!</font></h1>
                        <h3><font color="green">Success!</font></h3>	 */}                            
                            {/* <Alert
                                    message="Success!"
                                    description="Saved to InfoKeyMind!"
                                    type="success"                                            
                                /> */}
                            <Title level={3} type="secondary" style={{ color: 'green' }}>Saved to InfoKeyMind!!</Title>  
                        </div>
                    </>
                ),                
                btn: (
                    <Button
                        type="primary"
                        icon={<ReadOutlined />}
                        onClick={() => {
                            window.open(KNOWLEDGE_LIB_ROUTER)
                        }}                        
                    >                        
                        Open the knowledge base
                    </Button>
                ),
                onClick: () => {
                    console.log('Notification Clicked!');
                },
            });

            return {
                message: 'success'
            }
        }

        if (message.action === 'GetUrlReject') {
            notification.error({
                key,
                message: 'InfoKeyMind',
                icon: <SmileOutlined style={{ color: '#ff4d4f' }} />,
                description: (
                    <>
                        <div>
                            <Title level={3} type="danger" style={{ color: '#ff4d4f' }}>
                                Collection Failed!
                            </Title>
                            {message.data?.message && (
                                <Text type="secondary" style={{ color: '#8c8c8c', fontSize: '14px' }}>
                                    {message.data.message}
                                </Text>
                            )}
                        </div>
                    </>
                ),
                btn: (
                    <Button
                        type="primary"
                        danger
                        icon={<ReadOutlined />}
                        onClick={() => {
                            window.open(KNOWLEDGE_LIB_ROUTER)
                        }}
                    >
                        Try Again
                    </Button>
                ),
                onClick: () => {
                    console.log('Error Notification Clicked!');
                },
            });

            return {
                message: 'error',
                error: message.data?.message || 'Collection failed'
            }
        }
    }

    export const createGetUrlAction = () => ({
        id,
        action: GetUrl.Action.GetUrl
    })

    export const createGetUrlStartAction = () => ({
        id,
        action: GetUrl.Action.GetUrlStart,
    })

    export const createGetUrlResolveAction = () => ({
        id,
        action: GetUrl.Action.GetUrlResolve,
    })

    export const createGetUrlRejectAction = () => ({
        id,
        action: GetUrl.Action.GetUrlReject,
    })
}